<template>
    <div>
        <a-breadcrumb style="margin:0">
          <a-breadcrumb-item>首页</a-breadcrumb-item>
          <a-breadcrumb-item>缴费管理</a-breadcrumb-item>
          <a-breadcrumb-item>个人缴费</a-breadcrumb-item>
        </a-breadcrumb>
     <div>
    <el-card style="margin-top:80px" shadow="hover">
      <el-container>
    <el-header>
      <div>
        <el-row>
        <el-col :span="22">
          <div style="font-size:25px;margin-top:-20px">个人缴费台账管理</div>
        </el-col>
        </el-row>
      </div>
    </el-header>
  <el-main>

       <el-table :data="tableData" border style="font-size: 16px; width:65% left:10% ">

    <el-table-column type="index" label="序号"  width="60">
    </el-table-column>
    <el-table-column
      prop="static"
      label="状态"
      width="100">
    </el-table-column>
    <el-table-column
      prop="number1"
      label="订单号"
      width="180">
    </el-table-column>
    <el-table-column
      prop="date"
      label="缴费日期"
      width="100">
    </el-table-column>
    <!-- <el-table-column
      prop="end"
      label="结束日期"
      width="80">
    </el-table-column> -->
    <el-table-column
      prop="money"
      label="缴费金额"
      width="100">
    </el-table-column>
    <el-table-column
      prop="month"
      label="服务到期数(月)"
      width="150">
    </el-table-column>
    <el-table-column
      prop="start"
      label="开始日期"
      width="100">
    </el-table-column>
    <el-table-column
      prop="end"
      label="结束日期"
      width="100">
    </el-table-column>
    <el-table-column
      prop="way"
      label="充值方式"
      width="100">
    </el-table-column>
    <el-table-column
      prop="beizhu"
      label="备注"
      >
    </el-table-column>
   </el-table>
  </el-main>
  <el-footer>
    <div style="margin-left:750px"> 
            <router-link  to="/login/nav/user">
            <el-button type="primary" style="margin-right:10px">返回</el-button>
            </router-link>
            <el-button type="primary" @click="adds()" style="margin-right:13px">去充值</el-button>
  </div>
  </el-footer>
  </el-container>
    </el-card>

    <!-- 去充值的对话框 -->
    <el-dialog
    title="充值"
    :visible.sync="el_show"
    width="50%">
    <!-- 内容主体区 -->
    <el-form  width="50px">
        <el-form-item label="账户余额：0元" >
        </el-form-item>
        <el-form-item label="订单号：" prop="number1" >
        <el-input v-model="number1 " @input="onInput"></el-input>
        </el-form-item>
        <el-form-item label="充值金额：" prop="money" >
        <el-input v-model="money" @input="onInput"></el-input>
        </el-form-item>
        <el-form-item label="支付方式" prop="way" >
        <el-input v-model="way" @input="onInput"></el-input>
        </el-form-item>
        <el-form-item>
            <el-radio v-model="radio" label="1" style="margin-left:250px"><a style="font-size:20px"><a-icon type="alipay-square" theme="filled"  /></a> &nbsp;支付宝</el-radio>
  <el-radio v-model="radio" label="2" ><span class="iconfont1 icon-DVLINK_wangshangyinhang"></span> 网上银行</el-radio>
        </el-form-item>
         <el-form-item :span="24" style="margin-left:300px">
           <span class="iconfont1 icon-zhongguoyinhang" style="font-size:30px"></span>  
           <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
          <span class="iconfont1 icon-zhongguojiansheyinhang" style="font-size:30px"></span>
    </el-form-item>
     <el-form-item :span="24" style="margin-left:280px">
           <span class="iconfont1 icon-zhongguogongshangyinhang" style="font-size:50px"></span>  
           <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
          <span class="iconfont1 icon-zhongguonongyeyinhang" style="font-size:50px"></span>
    </el-form-item>
    </el-form>
    <!-- 底部区域 -->
    <span slot="footer" class="dialog-footer">
        <el-button @click="err()">取 消</el-button>
        <el-button type="primary"  @click="pushs()">保存</el-button>
    </span>
    </el-dialog>
    </div>
    </div>
</template>
<script>
export default {
    name:'Pay',
    data() {
        return {
          radio: '1',
          tableData: [{
            id:1,
            static:'已支付',
            number1:'17478769712',
            date:'2020年',
            money:'0元',
            month:'1月',
            start:'2020年',
            end:'2021年',
            way:'支付宝',
            beizhu:'',
          }, {
            id:2,
            static:'已支付',
            number1:'17478738439',
            date:'2019年',
            money:'0元',
            month:'2月',
            start:'2019年',
            end:'2021年',
            way:'支付宝',
            beizhu:'',
          }
        ],
         el_show:false,
         formInline: {
          user: '',
          region: ''
        },
        headerStyle () {
            return {
            'font-size': '18px',
            height: '40px',
             padding: '0'
            }
        },
    }
   
    },
     methods: {
      //新增让弹框显示
        adds:function(){
            this.el_show=true;
            
        },
        //取消让弹框隐藏
        err:function(){
            this.el_show=false;
        },

        //新增
        pushs:function(){
            if(!this.number1||!this.money||!this.way){
                this.$message.error('内容不能为空');
                return;
            }
            //使用map方法获取到id的最大值
            let ids = Math.max(...this.tableData.map(function(item){return item.id}))+1;
            this.tableData.push({
                    static:this.static,
                    number1:this.number1,
                    date:this.date,
                    money:this.money,
                    month:this.month,
                    start:this.start,
                    end:this.end,
                    way:this.way,
                    beizhu:this.beizhu,
                    id:ids
            })
            this.searchtableData=this.tableData;  //绑定搜索框初始数据
            this.$message({
                message: '创建成功',
                type: 'success'
            });
            this.static="",
            this.number1="",
            this.date="",
            this.money="",
            this.month="",
            this.start="",
            this.end="",
            this.way="",
            this.beizhu="",
            
            this.el_show=false;
        },
        onInput(){
          this.$forceUpdate();
        }
    },
}
</script>
<style lang="less" scoped>
     div {
        font-size: 15px;
      //   font-family:
      //  "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
    }
     .el-header {
    background-color:#E9EEF3 ;
    text-align: center;
    line-height: 80px;
    padding: 0 20px;
    box-sizing: border-box;
    flex-shrink: 0;
    padding-top: 12px;
    }
    .el-footer {
    background-color:#E9EEF3 ;
    color: #333;
    text-align: center;
    line-height: 65px;
    }
    .label{
      font-size: 18px;
    }   
//     .el-table {
//     position: relative;
//     overflow: hidden;
//     box-sizing: border-box;
//     flex: 1;
//     width: 100%;
//     max-width: 100%;
//     font-size: 16px;
//     color: #606266;
// }
    element.style {
    font-size: 20px;
   }
</style>